<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="button" value="get方式访问服务器" onclick="ajaxGet()"/><br/>
	<input type="button" value="Post方式访问服务器" onclick="ajaxPost()"/><br/>
	<input type="button" value="ajax方式访问服务器" onclick="ajax()"/><br/>
	
	 <script src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js"
	 type="text/javascript" charset="utf-8"></script>
	 <script type="text/javascript">
	 
	 /* get方法 */
	 function ajaxGet(){
	 		$.get(
	 			"${pageContext.request.contextPath}/ajax1",	 //url 请求服务器的地址
	 			{"name" : "张三","age" : "22"},    //data  代表请求服务器端的数据，发送给服务器
	 			function(data){    		//callback 表示服务器端成功响应触发的数据，即在网页上面弹出的数据
	 				alert("name: " + data.name + ",age : " + data.age); 
	 			},
	 			"json" //type:服务器端返回的数据类型
	 		);
	 		
	 	}
	 	
	 	/* post方法 */
	 	function ajaxPost(){
	 		$.post(
	 			"${pageContext.request.contextPath}/ajax1",	 //url 请求服务器的地址
	 			{"name" : "李四","age" : "23"},    //data  代表请求服务器端的数据，发送给服务器
	 			function(data){    		//callback 表示服务器端成功响应触发的数据，即在网页上面弹出的数据
	 				alert("name: " + data.name + ",age : " + data.age); 
	 			},
	 			"json" //type:服务器端返回的数据类型
	 		);
	 		
	 	}
	 	
	 	/* ajax方法 */
	 	function ajax(){
	 		$.ajax({
	 			async : true, //设置异步
	 			data : {"name" : "马柳","age" : "22"},//发送给服务器的
	 			dataType : "json",  //返回来的类型
	 			success : function(data){ 
	 				alert("name: " + data.name + ",age : " + data.age); 
	 			},
	 			type : "POST",   //设置POST/GET就是设置请求方式
	 			url : "${pageContext.request.contextPath}/ajax1"	 //url 请求服务器的地址
	 		});
	 	}
	 	
	 </script>
	
	
</body>
</html>